<!-- 告警页面 -->
<template>
  <div class="content2">


    <div class="c2left">

    </div>

    <div class="c2right">
      <!-- 设备数量echarts -->
      <div id="c2e1">1</div>
      <!-- 每栋数量展示 -->
      <div id="c2e2">2</div>
      <!-- 数量占比 -->
      <div id="c2e3">3</div>
    </div>


  </div>
</template>

<script>
import {child2Echart1,child2Echart2} from '@/common/echartsdata.js';

  export default {
    name: 'childwarn',
    data() {
      return {

      }
    },
    created() {

    },
    mounted() {
    //加载echarts
      this.load2Echarts();
    },
    components:{

    },
    methods: {
    //加载echarts
    load2Echarts(){
        child2Echart1();
        child2Echart2();
    },
    },
    computed: {

    },
    watch: {

    }
  }
</script>

<style lang="less" scoped>
  .content2{
    width: 100%;
    height: (100%-@htop);
    position: absolute;
    top: @htop;
    z-index: 9;
    // background: rgba(0,0,0,.3);
    pointer-events: none;
    //左侧
    .c2left{
      height: 97%;
      padding: 10px;
      margin-left: 30px;
      float: left;
      color: #fff;
      display: flex;
      flex-direction: column;
      width: 350px;
      background: url(~assets/icon/echartsbg1.png) no-repeat;
      background-size: 100% 100%;
      pointer-events: auto;
    }


    //右侧
    .c2right{
        // background-color: skyblue;
        display: flex;
        flex-direction: column;
        float: right;
        margin-right: 30px;
        pointer-events: auto;
        #c2e1,#c2e2,#c2e3{
          width: 280px;
          min-height: 220px;
          height: 30%;
          background: url("~assets/icon/echartsbg.png") no-repeat;
          // background-image: url(../../assets/icon/echartsbg.png);
          background-size: 100% 100%;
          padding: 20px 10px;
        }
    }


  }
</style>
